<template>
  <div class="body">
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 供货单位 </el-col>
            <el-col :span="16">
              <!-- <el-input v-model="ser.name" placeholder="请输入供货单位" style="width: 100%"></el-input> -->
              <el-select v-model="ser.supplier_id" filterable  clearable  placeholder="请选择供货单位" style="width: 100%">
                <el-option v-for="(item, index) in SupplierList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center">材料类型 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.type_id"
                filterable
                clearable
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in MaterialTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button class="add_btn" @click="ser_list(0)">搜索</el-button>
          <el-button class="add_btn" @click="ser_list(1)">重置</el-button>
          <el-button @click="add_warehouse" style="margin-left: 15px">新增材料名称</el-button>
        </el-col>
      </el-row>
    </div>
  
    <el-table :data="productList" v-loading="loading" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="code" label="材料编号"> </el-table-column>
      <el-table-column prop="name" label="材料名称"> </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
           <span>{{scope.row.model_number}}</span>
        </template>  
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="scope">
           <span>{{scope.row.specification}}</span>
        </template>  
      </el-table-column>
      <el-table-column label="颜色">
        <template slot-scope="scope">
           <span>{{scope.row.color}}</span>
        </template>  
      </el-table-column>
      <el-table-column prop="w_price" label="入库价">
      </el-table-column>
      <!-- <el-table-column prop="d_price" label="出库价">
      </el-table-column> -->
      <el-table-column prop="unit" label="单位">
      </el-table-column>
      <el-table-column prop="unit" label="类型">
        <template slot-scope="scope">
           <span>{{scope.row.type&&scope.row.type.name}}</span>
        </template>  
      </el-table-column>
      <el-table-column label="供应商">
        <template slot-scope="scope">
           <span>{{scope.row.supplier&&scope.row.supplier.name}}</span>
        </template>  
      </el-table-column>
      <el-table-column prop="initial_inventory" label="初期库存">
      </el-table-column>
      <el-table-column prop="initial_max" label="最高库存">
      </el-table-column>
      <el-table-column prop="initial_min" label="最小库存">
      </el-table-column>
      <el-table-column prop="initial_price" label="初期金额">
      </el-table-column>
      <el-table-column label="操作" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button
            @click="add_warehouse(scope.row)"
            type="text"
            icon="el-icon-edit"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否删除这条数据？"
            @confirm="del_product(scope.row)"
          >
            <el-button slot="reference" type="text" icon="el-icon-delete">
              删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="isProduct"
      width="50%"
      :close-on-click-modal="false"
      @close="close_dialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="11">
            <el-form-item label="材料编码" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="材料名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="材料分类" prop="type_id">
              <el-select
                v-model="ruleForm.type_id"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in MaterialTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="材料供货型号" prop="model_number">
              <el-input v-model="ruleForm.model_number"></el-input>
            </el-form-item>
          </el-col>
       
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="材料规格" prop="specification">
              <el-input v-model="ruleForm.specification"></el-input> 
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="材料颜色">
              <el-input v-model="ruleForm.color"></el-input>
              <!-- <el-select
                v-model="ruleForm.color_id"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ColorList"
                  :key="index"
                  :label="item.color"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="入库价" prop="w_price">
              <el-input v-model="ruleForm.w_price"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item label="出库价" prop="d_price">
              <el-input v-model="ruleForm.d_price"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="11">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="ruleForm.unit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> 
          <el-col :span="11">
            <el-form-item label="初期库存" prop="initial_inventory">
              <el-input v-model="ruleForm.initial_inventory"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="初期金额" prop="initial_price">
              <el-input v-model="ruleForm.initial_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="11">
            <el-form-item label="最低库存" prop="initial_min">
              <el-input v-model="ruleForm.initial_min"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="最高库存" prop="initial_max">
              <el-input v-model="ruleForm.initial_max"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="11">
            <el-form-item label="供应商" prop="supplier_id">
              <el-select
                v-model="ruleForm.supplier_id"
                filterable
                placeholder="请选择供货单位"
                style="width: 100%"
              >
                <el-option
                  v-for="item in SupplierList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close_dialog">取 消</el-button>
        <el-button type="primary" @click="addhuojia('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMaterialList,
  getMaterialTypeList,
  createMaterial,
  delMaterial,
  getSupplierList,
  getMaterialSpecificationList,
  getColorList
} from "@/api/product/index";
export default {
  data() {
    return {
      ser:{
        supplier_id:"",
        type_id:""
      },
      loading:true,
      SupplierList: [],
      MaterialTypeList:[],
      MaterialSpecificationList: [],
      ColorList:[],
      title: "",
      isProduct: false,
      productList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      ruleForm: {
        id: "",
        code: "",
        name: "",
        type_id: "",
        model_number: "",
        specification: "",
        color: "",
        unit: "",
        w_price:'',
        d_price:'',
        initial_inventory:'',
        initial_price:'',
        initial_min:'',
        initial_max:'',
        supplier_id:''
      },
      rules: {
        code: [
          { required: true, message: "请输入材料编号", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入材料名称", trigger: "blur" },
        ],
        type_id: [
          { required: true, message: "请选择材料分类", trigger: "blur" },
        ],
        // model_number: [
        //   { required: true, message: "请选择供货型号", trigger: "blur" },
        // ],
        // specification_id: [
        //   { required: true, message: "请xua'z", trigger: "blur" },
        // ],
        // color_id: [
        //   { required: true, message: "请选择材料颜色", trigger: "blur" },
        // ],
        // unit: [
        //   { required: true, message: "请输入单位", trigger: "blur" },
        // ],
        // w_price:[
        //   { required: true, message: "请输入入库价", trigger: "blur" },
        // ],
        // d_price:[
        //   { required: true, message: "请输入出库价", trigger: "blur" },
        // ],
        // initial_inventory:[
        //   { required: true, message: "请输入初期库存", trigger: "blur" },
        // ],
        // initial_price:[
        //   { required: true, message: "请输入初期金额", trigger: "blur" },
        // ],
        // initial_min:[
        //   { required: true, message: "请输入最低库存", trigger: "blur" },
        // ],
        // initial_max:[
        //   { required: true, message: "请输入最高库存", trigger: "blur" },
        // ],
        // supplier_id:[
        //   { required: true, message: "请选择供应商", trigger: "blur" },
        // ]
      },
    };
  },
  mounted() {
    this.getlist();
    this.get_MaterialTypeList();
    this.get_SupplierList();
    // this.get_MaterialSpecificationList()
    // this.get_ColorListlist()
  },
  methods: {
    ser_list(type){
      if(type){
        this.ser={
          supplier_id:"",
          type_id:""
        }
        this.getlist();
      }else{
        this.getlist();
      }
    
    },
    // 颜色
    get_ColorListlist() {
      getColorList().then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },
    // 材料规格
    get_MaterialSpecificationList() {
        getMaterialSpecificationList().then((res) => {
          if (res.code == 200) {
            this.MaterialSpecificationList = res.data.data; 
          }
        });
      },
    // 材料分类
    get_MaterialTypeList() {
      getMaterialTypeList().then((res) => {
        if (res.code == 200) {
          this.MaterialTypeList = res.data.data;
        }
      });
    },
     //供货单位
     get_SupplierList() {
      getSupplierList().then((res) => {
        if (res.code == 200) {
          this.SupplierList = res.data;
        }
      });
    },
    del_product(row) {
      delMaterial({ id: row.id, is_del: 1 }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getlist();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    close_dialog() {
      this.isProduct = false;
      this.ruleForm = {
        id: "",
        code: "",
        name: "",
        type_id: "",
        specification: "",
        color: "",
        unit: "",
        w_price:'',
        d_price:'',
        initial_inventory:'',
        initial_price:'',
        initial_min:'',
        initial_max:'',
        supplier_id:''
      }
    },
    addhuojia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createMaterial(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add_warehouse(row) {
      console.log(row)
      if (row.id) {
          this.ruleForm.id=row.id
          this.ruleForm.code=row.code
          this.ruleForm.name=row.name
          this.ruleForm.type_id=row.type_id
          this.ruleForm.specification=row.specification
          this.ruleForm.color=row.color
          this.ruleForm.unit=row.unit
          this.ruleForm.w_price=row.w_price
          this.ruleForm.d_price=row.d_price
          this.ruleForm.initial_inventory=row.initial_inventory
          this.ruleForm.initial_price=row.initial_price
          this.ruleForm.initial_min=row.initial_min
          this.ruleForm.initial_max=row.initial_max
          this.ruleForm.supplier_id=row.supplier_id
        this.title = "编辑材料";
      } else {
        this.title = "新增材料";
      }
      this.isProduct = true;
    },
    getlist() {
      getMaterialList({...this.pagination,...this.ser}).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    changeValue(e) {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped></style>
